<template>
	<view class="recharge-content">
		<view class="module1">
			<view class="myMoney">
				<view class="myTitle">{{ pledgeFlag? $t('common.pledgeBalance'): $t('common.myBalance')}} ($)</view>
				<view class="myNum">{{pledgeFlag?pledgeAmount:amount}}</view>
			</view>
			<view class="myMoney" v-if="!pledgeFlag">
				<view class="myTitle">{{$t('common.teamBalance')}} ($)</view>
				<view class="myNum">{{team}}</view>
			</view>
		</view>

		<uni-notice-bar scrollable single show-icon :text="notice" background-color="#13161F" color="white"
			:speed="speed" />

		<view class="module2">


			<!-- <view class="bank">
				<u-action-sheet :actions="bankList" :show="bankShow" @close="bankShow=false"
					@select="selectClick"></u-action-sheet>
				<view class="flex justify-between" @click="bankShow=true">
					<view>{{selectBank.name}}</view>
					<uni-icons type="forward" size="20" color="white"></uni-icons>
				</view>

			</view> -->
			<view class="inputMoneyBox">
				<view class="numBox">{{$t('mine.recharge.rechargeAmount')}}</view>
				<input type="number" :disabled="pledgeFlag" :placeholder="$t('mine.recharge.placeholder')" class="rechargeInput" shape="circle"
					v-model="withdrawAmount"></input>
			</view>

			<u-button class="rechargeBtn" type="primary" shape="circle" :loadingText="$t('common.submit')"
				:loading="loading" :disabled="loading" @click="submit">{{$t('common.submit')}}</u-button>
		</view>


		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" :cancelText="$t('common.cancel')" :confirmText="$t('common.agree')"
				:title="$t('mine.recharge')" @confirm="dialogConfirm" @close="dialogClose">

				<view style="width: 150px;">
					<!-- <view class="text-center" style="margin-bottom: 20px; font-size: 2opx; font-family: 700;">Withdrawal
					</view> -->
					<view class="text-center myNum" style="margin-bottom: 20px; color: black;">{{withdrawAmount}}$
					</view>


				</view>

			</uni-popup-dialog>
		</uni-popup>

	</view>



</template>

<script>
	import {
		getBalanceInfo
	} from "@/api/system/user.js"
	import {
		countInfo,
		withdrawal,
		uploadImg
	} from "@/api/withdrawal/withdrawal.js"
	import {
		getMessagetList,
		recharge
	} from "@/api/withdrawal/recharge.js"
	import {
		getList
	} from "@/api/bankCard.js"
	import config from '@/config'
	export default {
		data() {
			return {
				speed: 15,
				radioValue: '1',
				amount: '0',
				pledgeAmount: '0',
				team: '0',
				notice: '',
				bankList: [],
				//selectBank: {},
				bankShow: false,

				withdrawFee: 0,
				withdrawFeeValue: 0,
				withdrawRate: '16%',
				withdrawAmount: '',
				detailShow: false,
				loading: false,
				fileList1: [],
				pledgeId: '',
				pledgeFlag: false, //飞

			};
		},
		onLoad: function(option) {
			var pledgeId = option.pledgeId;
			this.pledgeFlag = pledgeId != undefined;
			if(this.pledgeFlag){
				this.withdrawAmount = option.pledgePrice;
				this.pledgeId = pledgeId;
			}
			console.log('pledgePrice'+pledgeId);
				
			this.balanceInfo();

			countInfo().then((rsp => {
				if (rsp.code == 200) {

					this.withdrawFee = rsp.data.withdrawFee;
					this.withdrawRate = (parseFloat(this.withdrawFee) * 100) + "%";
					console.log(this.withdrawRate)
				}
			}))


			getMessagetList().then(rsp => {
				if (rsp.code == 200) {
					this.notice = rsp.msg;
				}
			})

		},
		methods: {


			dialogClose() {},
			selectClick(item) {
				this.selectBank = item;
				console.log(item)
				this.bankShow = false;
			},
			balanceInfo() {
				getBalanceInfo().then(rsp => {
					if (rsp.code == 200) {
						this.amount = rsp.data.amount;
						this.pledgeAmount = rsp.data.pledgeAmount;
						this.team = rsp.data.team;
					}
				})
			},
			onNavigationBarButtonTap(e) {
				//e.index 如果是俩图标的话，index然后的0 或者1  就知道点击的哪个
				uni.navigateTo({
					url: '/pages/mine/recharge/recharge-record'
				})
			},
			redClose() {
				this.detailShow = false;
			},
			submit() {

				// if (plus.os.name == 'Android' || plus.os.name == 'iOS') {
				// 	//ios 需要解码
				// 	//plus.runtime.openURL('https://www.baidu.com');、
				// } else {
				// 	window.location.href = 'https://www.baidu.com';
				// }

				if (!this.withdrawAmount) {
					return;
				}

				var withdrawAmount = Math.floor(parseFloat(this.withdrawAmount) * 100) / 100;
				this.withdrawAmount = withdrawAmount;

				if (withdrawAmount < 5) {
					uni.showToast({
						title: this.$t('mine.recharge.minimumRecharge') + "5$",
						icon: 'none'
					})
					return;
				}
				if (withdrawAmount > 2000) {
					uni.showToast({
						title: this.$t('mine.recharge.maxmumRecharge') + "2000$",
						icon: 'none'
					})
					return;
				}
				this.$refs.alertDialog.open();
			},
			dialogConfirm() {
				var params = {
					"amount": this.withdrawAmount,
					"pledgeId": this.pledgeId
				}
				var $this = this;
				this.loading = true;
				recharge(params).then(rsp => {
					if (rsp.code == 200) {
						$this.withdrawAmount = '';
						var platform = uni.getSystemInfoSync().platform;
						if (platform == 'android' || platform == 'ios') {
							//ios 需要解码
							//plus.runtime.openURL(rsp.data);
							uni.navigateTo({
								//url: '/pages/recharge/recharge-open?url=' + rsp.data
								url: '/pages/mine/recharge/recharge-open?url=' + rsp.data
							})
						} else {
							uni.navigateTo({
								//url: '/pages/recharge/recharge-open?url=' + rsp.data
								url: '/pages/mine/recharge/recharge-open?url=' + rsp.data
							})

						}
						this.loading = false;

					}
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-color-bg;
		color: $uni-color-font;

	}

	.recharge-content {

		padding: 14px 12px;

		.module1 {
			border-radius: 10px;
			background-color: $uni-color-primary;
			height: 100px;
			display: flex;
			padding: 16px 20px;
			color: $uni-color-box;

			.myMoney {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;


				.myTitle {
					font-size: 14px;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
				}

				.myNum {
					font-size: 22px;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					height: 30px;
					line-height: 30px;
				}
			}
		}

		.module2 {
			background: $uni-color-box;
			box-shadow: 0 3px 6px 1px rgba(0, 0, 0, .12);
			border-radius: 10px;
			padding: 16px 20px 20px 20px;

			.minMoneyStyle {
				margin: 21px 0 10px 0;
				display: inline-block;
				font-size: 14px;
				font-family: PingFangSC-Regular-Regular, PingFangSC-Regular;
				font-weight: 400;
			}

			.bank {
				margin: 18px 0px;
				font-family: PingFangSC-Regular-Regular, PingFangSC-Regular;

				.numBox {
					display: inline-block;
					margin-bottom: 10px;
					font-size: 14px;
					font-family: Antonio;
					font-weight: 600;
				}
			}

			.inputMoneyBox {
				margin-bottom: 14px;

				.numBox {
					display: inline-block;
					margin-bottom: 10px;
					font-size: 14px;
					font-family: Antonio;
					font-weight: 600;
				}

				.rechargeInput {
					border-radius: 40px 40px 40px 40px;
					height: 40px;
					border: 2px solid $uni-color-primary;
					text-align: center;
					margin-top: 10px;
					margin-bottom: 14px;
					font-size: 16px;
					color: white;
					font-weight: 500;
				}
			}

			.rechargeBtn {
				background-color: $uni-color-primary;
				border-width: 0px;
				color: $uni-color-box;
			}
		}

		.myNum {
			font-size: 22px;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			height: 30px;
			line-height: 30px;
		}

		.tip {
			color: grey;
		}

		.cancel-btn {
			background-color: $uni-color-warning;
			border-radius: 15px;
		}

		.withdrad-btn {
			background-color: $uni-color-primary;
			border-radius: 15px;
		}

	}
</style>